<template>
	<view class="page">
		<q-navbar title="登录" :backgrounds="{backgroundColor:'transparent'}" :isBack="false" />
		<view v-if="isWxlogin=='1'" class="wxLoading">
			<text>正在登录中...</text> <u-loading size="36" color="green"></u-loading>
		</view>
		<view class="page_container" v-else>
			<view class=" logo">
				<view>
					欢迎进入
				</view>
				<view>
					秦创原叫号系统
				</view>
			</view>
			<view class="login">
				<u-form labelPosition="left" :model="form" ref="uForm" :errorType="['message']">
					<u-form-item prop="phone" borderBottom :leftIcon="require('@/static/images/zhineng@2x.png')"
						:leftIconStyle="{width:'45rpx',height:'46rpx'}">
						<u-input v-model="form.phone" placeholder="请输入账号" clearable></u-input>
					</u-form-item>
					<u-form-item prop="password" borderBottom :leftIcon="require('@/static/images/mima@2x.png')"
						:leftIconStyle="{width:'45rpx',height:'46rpx'}">
						<u-input v-model="form.password" type="password" placeholder="请输入密码" clearable>
						</u-input>
					</u-form-item>
					<view style="padding: 50rpx 20rpx;">
						<u-button type="primary" :custom-style="{
								backgroundColor:'#4559d9',
								width: '550rpx',
							}" @click="handelClick">登录</u-button>
					</view>
				</u-form>
			</view>
			<view class="page_login">
				<view class="btn-item" :style="{
					backgroundColor:v.backgroundColor,
					color:v.color
				}" v-for="(v,i) in btnList" :key="i" @click="handelClick(v.type)">
					<view v-if="v.icon"
						:style="`background:url(${v.icon}) no-repeat  left/100% auto;width:60rpx;height:60rpx;margin-right:10rpx`">
					</view>
					<view class="">
						{{v.name}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	import {
		setToken
	} from '@/utils/auth'
	export default {
		components: {},
		props: {},
		data() {
			return {
				btnList: [{
					name: '微信一键登录',
					icon: require('@/static/wx.png'),
					backgroundColor: '#cef1cd',
					color: '#09bb07',
					type: 'wx'
				}],
				isWxlogin: "",
				form: {},
				rules: {
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		watch: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			let userInfo = this.$s.get('userInfo')
			let expireTime = this.$s.get('expireTime')
			if (typeof userInfo == 'object' && new Date().getTime() < expireTime) {
				this.router.to({
					path: '/pages/index/index',
					time: 0
				})
			}
			let code = this.$wx.getCode('code')
			if (code !== null) {
				this.findUser(code)
			}
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.isWxlogin) {
				this.isWxlogin = options.isWxlogin
			}
		},
		onShow() {},
		methods: {
			handelClick(type) {
				if (type == 'wx') {
					this.wxLogin()
				} else {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							console.log('验证通过');
							this.$store.dispatch("Login", {
								form: this.form,
								path: '/pages/index/index'
							})
						} else {
							return false
						}
					});
				}
			},
			async wxLogin() {
				let isWx = await this.$wx.isWx()
				if (isWx) {
					this.$wx.login('/calling-system/index.html#/pages/login/login?isWxlogin=1')
				} else {
					return this.$msg.default('当前不是微信环境！')
				}
			},
			// 微信登录-----------------------------------------------------------
			findUser(val) {
				this.$api.wxLogin({
					code: val
				}).then(res => {
					setToken(res.data.token)
					this.$s.set('userId', res.data.userId)
					this.findSingUser(res.data.userId)
				})
			},
			async findSingUser(userId) {
				let expireTime = new Date().getTime() + 15 * 24 * 60 * 60 * 1000
				let res = await this.$api.getInfo(userId)
				if (res.code == 200) {
					res.data = Object.assign({}, res.data.dept, res.data)
					res.data.avatar = config.imgUrl + res.data.avatar
					this.$s.set('userInfo', res.data)
					this.$s.set('expireTime', expireTime)
					this.$s.set('proStatus', res.data.proStatus)
					window.location.href = 'https://dp.zgsq.cloud/calling-system/index.html#/pages/index/index'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: url('~@/static/images/login.png') no-repeat top left/100% 100%;

		.page_container {
			width: 100%;
			height: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			justify-content: space-around;


			.logo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: 700;
				font-size: 48rpx;
				line-height: 60rpx;
				letter-spacing: 5rpx;
				color: #fff;
				margin: 60rpx 0 100rpx;
			}

			.login {
				width: 600rpx;
				margin: 0 auto;

				::v-deep .uni-input-input {
					color: #fff !important;
				}
			}

			.page_login {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btn-item {
					width: 550rpx;
					height: 90rpx;
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn-item:nth-child(1) {
					margin-bottom: 40rpx;
				}
			}
		}
	}

	.wxLoading {
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
	}
</style>